:host{
  display: contents;
}
.dialog{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 200px;
  border: 0;
  border-radius: var(--border-radius-base, 4px);
  box-shadow: var(--shadow, 2px 2px 15px rgba(0,0,0,0.15));
  padding: 20px 24px;
  visibility: hidden;
  opacity: 0;
  transform: scale(.8) translateY(-50px);
}
.dialog::backdrop{
  background-color: rgba(0,0,0,.45);
}
.dialog[open]{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: var(--transition, .2s);
}
.icon{
  font-size: 22px;
}
.title{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.close{
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
}
.close::part(button){
  width: 32px;
  height: 32px;
  font-size: 18px;
  color: var(--text-color-secondary, rgba(0, 0, 0, .45));
}
.close{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256 7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256l118.2 119z'/%3E%3C/svg%3E")
}
.form{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}